<template>
    <div class="container">
        <div class="header">美食分类</div>
        <h2>探索各式各样的美食，找寻属于你的美味</h2>
        <div class="card-box">
            <div class="card">
                <div class="img">
                    <img src="@/assets/zhongcan.png" alt="">
                </div>
                <div class="name">中餐</div>
                <div class="introduce">传统美味，经典菜系</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>

            <div class="card">
                <div class="img">
                    <img src="@/assets/xican.png" alt="">
                </div>
                <div class="name">西餐</div>
                <div class="introduce">精致料理，品味生活</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>

            <div class="card">
                <div class="img">
                    <img src="@/assets/tianpin.png" alt="">
                </div>
                <div class="name">甜品</div>
                <div class="introduce">甜蜜诱惑，幸福滋味</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>

            <div class="card">
                <div class="img">
                    <img src="@/assets/riliao.png" alt="">
                </div>
                <div class="name">日料</div>
                <div class="introduce">精致料理，匠心之作</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>

            <div class="card">
                <div class="img">
                    <img src="@/assets/hancan.png" alt="">
                </div>
                <div class="name">韩餐</div>
                <div class="introduce">韩式风味，美味共享</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>
            
            <div class="card">
                <div class="img">
                    <img src="@/assets/dongnanyacai.png" alt="">
                </div>
                <div class="name">东南亚菜</div>
                <div class="introduce">异国风情，香料之美</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>
            
            <div class="card">
                <div class="img">
                    <img src="@/assets/yinpin.png" alt="">
                </div>
                <div class="name">饮品</div>
                <div class="introduce">解渴清爽，品味生活</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>

            <div class="card">
                <div class="img">
                    <img src="@/assets/xiaochi.png" alt="">
                </div>
                <div class="name">小吃</div>
                <div class="introduce">街边美味，休闲享受</div>
                <a href="/chinesefood" class="number">286个菜品  ></a>
            </div>
        </div>
        
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.container{
    padding: 0 35px;
    margin: 16px;
    background: #F9FAFB;
    .header{
        margin: 32px 0 16px;
        font-weight: 700;
        font-size: 30px;
        color: #111827;
        line-height: 36px;
        text-align: left;
    }
    h2{
        font-weight: 400;
        font-size: 16px;
        color: #4B5563;
        line-height: 24px;
        text-align: left;
    }
    .card-box{
        display: grid;  
        grid-template-columns: repeat(4, 1fr);   
        gap: 24px;
        margin-right: 16px; 
        .card{
            margin-top: 32px;
            background: #FFFFFF rgba(0,0,0,0.001);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.09);
            border-radius: 12px 12px 12px 12px;
            .img{
                width: 100%;
            }
            .name{
                font-weight: 600;
                font-size: 18px;
                color: #111827;
                line-height: 28px;
                text-align: left;
                margin: 16px 0 8px 16px;
            }
            .introduce{
                font-weight: 400;
                font-size: 14px;
                color: #4B5563;
                line-height: 20px;
                text-align: left;
                margin-left: 16px;
            }
            .number{
                display: inline-block;
                margin-left: 16px;
                margin-top: 12px;
                margin-bottom: 12px;
                font-weight: 400;
                font-size: 14px;
                color: #FF6B6B;
                line-height: 20px;
                text-align: left;
                
            }
        }
              
    }
      
}


</style>